<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拉伸</title>
		<style>
			.transitionbox{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				
				/*使用拉伸动画效果--横向拉伸效果 width*/
				transition: 1s; 
				/*使用拉伸动画效果--纵向拉伸效果 height*/
				
			}
			
			.transitionbox:hover{
				width: 500px;/*拉伸宽度从100到500*/
				height: 500px;
				background-color: #D2691E;
			}
			
		</style>
	</head>
	<body>
		<h3>拉伸盒子动画效果</h3>
		<h5>transition 有两个参数：拉伸方向width，1s动画执行时间</h5>
		<div class="transitionbox">变大~变小</div>
	</body>
</html>
